import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

// 导入8个动态路由模块,进行整合
import approvalRouter from './modules/approval'
import attendanceRouter from './modules/attendance'
import departmentRouter from './modules/department'
import employeeRouter from './modules/employee'
import permissionRouter from './modules/permission'
import roleRouter from './modules/role'
import salaryRouter from './modules/salary'
import socialRouter from './modules/social'

/**
 * 动态路由表(重点): 不是所有角色都可以访问的页面,需要权限控制
 */
export const asyncRoutes = [
  departmentRouter,
  roleRouter,
  employeeRouter,
  permissionRouter,
  approvalRouter,
  attendanceRouter,
  salaryRouter,
  socialRouter
]

/**
 * 静态路由表: 所有角色都可以访问的页面,不需要权限控制
 */
export const constantRoutes = [
  { // 登录
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  }, { // 404
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  }, { // 主页
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        // 注意: name属性值不能乱写,必须和用户信息中的menus数组中的字符串保持一致.
        //       今后作为左侧菜单的筛选条件
        component: () => import('@/views/dashboard/index'),
        meta: {
          title: '首页', // 控制左侧菜单名称
          icon: 'dashboard' // 控制左侧菜单的小图标
        }
      }
    ]
  }
]

// 重大发现: 改了路由表,左侧菜单栏会随着发生变化,因为左侧菜单就是基于路由表动态循环生成的.

const createRouter = () => new Router({
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  // 注意: 目前只是临时合并, 意味着任何用户登录进来, 都会开放所有菜单选项
  //       所有路由规则都不匹配的时候显示404 (而且最好写在最后面,所以放在了整合的最后面)

  // 注意:默认情况开发静态路由表,动态路由表需要经过筛选后动态追加进来
  routes: constantRoutes
  // routes: [
  //   ...constantRoutes,
  //   ...asyncRoutes,
  //   { path: '*', redirect: '/404', hidden: true }
  // ]
})

const router = createRouter()

// 重置路由表方法
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

// 问题1: 路由表与左侧菜单的关系,为什么路由变了,左侧菜单就变了?
// 答: 左侧菜单是基于路由表动态循环生成的
// 问题2: 为什么有的路由出现在了左侧,有些没有?
// 答: 受hidden属性的控制,true为不显示,false为显示
// 问题3: 哪些情况下生成的是一级菜单,哪些情况下生成的多级菜单?
// 答: 3中情况会生成一级菜单:
//    情况1: 没有children,自身没有hidden为true的属性
//    情况2: 有children,但是children中只有一个孩子
//    情况3: 有children,但是只有一个需要显示的孩子(其他孩子有hidden:true的属性)
//    除了上述3中情况之外,都会生成多级菜单,原理是利用了组件的递归生成.
